<template>
	<div>
		<uCircleProgress border-width="10" width="150" :active-color="color"
			:percent="percent">
			<view>
				<view class="text-center text-bold text-lg">{{val}}</view>
				<view class="text-center text-gray">{{unit}}</view>
			</view>
		</uCircleProgress>
		<view class="u-m-t-10 text-black text-center">{{name}}</view>
	</div>
</template>

<script>
	import uCircleProgress from '@/components/u-circle-progress/u-circle-progress'
	export default{
		props:{
			name:{
				type:String,
				default:''
			},
			unit:{
				type:String,
				default:''
			},
			val:{
				type:[String,Number],
				default:''
			},
			percent:{
				type:Number,
				default: 0
			},
			color:{
				type:String,
				default: '#41C1F9'
			}
		},
		components:{
			uCircleProgress
		}
	}
</script>

<style>
</style>